import 'package:flutter/cupertino.dart';
import 'package:imember/UI/Pay/CustomerInfo.dart';
import 'package:imember/UI/Pay/DiscountPsw.dart';
import 'package:imember/UI/Pay/Remarks/Remarks.dart';
import 'package:imember/Util/Global.dart';
import 'package:imember/Util/MyColor.dart';
import 'package:imember/Util/PageUtil.dart';
import 'package:imember/Widget/MyButton.dart';
import 'package:imember/Widget/MyImage.dart';
import 'package:imember/Widget/MyPage.dart';

import 'Discount.dart';
import 'PayInput.dart';
import 'UnifiedNumber.dart';
import 'Vehicle.dart';

class Pay extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return PayState();
  }
}

class PayState extends State {
  int currentArea = 0;

  @override
  Widget build(BuildContext context) {
    return MyPage(
      Container(
          padding: EdgeInsets.all(24),
          child: Row(
            children: [
              LeftArea(),
              Expanded(
                  child: Container(
                      margin: EdgeInsets.fromLTRB(14, 0, 14, 0),
                      decoration: Global.getBoxBg(8, MyColor.F2),
                      height: double.infinity,
                      child: Stack(children: [
                        Visibility(
                          visible: currentArea == RightArea.CustomerInfo,
                          maintainState: true,
                          child: CustomerInfo(),
                        ),
                        Visibility(
                          visible: currentArea == RightArea.Remarks,
                          maintainState: true,
                          child: Remarks(),
                        ),
                        Visibility(
                          visible: currentArea == RightArea.Discount,
                          maintainState: true,
                          child: Discount(),
                        ),
                        Visibility(
                          visible: currentArea == RightArea.UnifiedNumber,
                          maintainState: true,
                          child: UnifiedNumber(),
                        ),
                        Visibility(
                          visible: currentArea == RightArea.Vehicle,
                          maintainState: true,
                          child: Vehicle(),
                        ),
                        Visibility(
                          visible: currentArea == RightArea.Pay,
                          maintainState: true,
                          child: PayInput(),
                        ),
                      ]))),
              RightArea(
                  currentArea: currentArea,
                  onAreaClick: (int area) {
                    if (currentArea == area) {
                      return;
                    }
                    FocusManager.instance.primaryFocus?.unfocus();
                    if (area == RightArea.Discount) {
                      PageUtil().open(context, DiscountPsw(onVerSuccess: () {
                        setState(() {
                          currentArea = area;
                        });
                      }));
                      return;
                    }
                    setState(() {
                      currentArea = area;
                    });
                  })
            ],
          )),
      showNotice: true,
      showIcon: true,
    );
  }
}

///左侧消费明细
class LeftArea extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Widget> menus = [];
    for (var i = 0; i < 6; i++) {
      menus.add(Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
        Text("豬腳貢糖 ( 全素 )    X1", style: TextStyle(fontSize: 16, color: MyColor.C70, height: 2)),
        Text("\$150", style: TextStyle(fontSize: 16, color: MyColor.C70, height: 2)),
      ]));
    }
    menus.add(Container(width: double.infinity, height: 1, color: MyColor.C70, margin: EdgeInsets.only(bottom: 19)));
    menus.add(Text("小計\$150", style: TextStyle(fontSize: 15, color: MyColor.Orange)));
    menus.add(Text("折扣\$10", style: TextStyle(fontSize: 15, color: MyColor.Orange)));
    menus.add(Container(width: double.infinity, height: 1, color: MyColor.C70, margin: EdgeInsets.only(bottom: 14, top: 8)));
    menus.add(Text("總計\$140", style: TextStyle(fontSize: 20, color: MyColor.Orange)));

    return Container(
        width: 290,
        decoration: Global.getBoxBg(8, MyColor.F2),
        child: Column(children: [
          Container(height: 15),
          Text("消費明細", style: TextStyle(fontSize: 21, color: MyColor.C70, fontWeight: FontWeight.bold)),
          Container(height: 8),
          Expanded(
              child: SingleChildScrollView(
            padding: EdgeInsets.all(22),
            child: Column(crossAxisAlignment: CrossAxisAlignment.end, children: menus),
          ))
        ]));
  }
}

///右侧按钮区域
class RightArea extends StatelessWidget {
  static const int CustomerInfo = 0;
  static const int Remarks = 1;
  static const int PreferentialMerger = 2;
  static const int Discount = 3;
  static const int UnifiedNumber = 4;
  static const int Vehicle = 5;
  static const int Pay = 6;
  int currentArea = 0;
  Function(int area) onAreaClick;

  RightArea({required this.currentArea, required this.onAreaClick});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 248,
      child: Column(
        children: [
          BorderBtn("顧客資訊", light: currentArea == CustomerInfo, height: 68, onTap: () {
            onAreaClick(CustomerInfo);
          }),
          Container(height: 26),
          Text("顧客特殊資訊", style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold, color: MyColor.C99)),
          Container(height: 22),
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            BorderBtn("備註", light: currentArea == Remarks, height: 79, width: 79, onTap: () {
              onAreaClick(Remarks);
            }),
            BorderBtn("優惠合併", light: currentArea == PreferentialMerger, height: 79, width: 79, onTap: () {
              onAreaClick(PreferentialMerger);
            }),
            BorderBtn("折扣", light: currentArea == Discount, height: 79, width: 79, onTap: () {
              onAreaClick(Discount);
            }),
          ]),
          Container(height: 24),
          Text("付款方式", style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold, color: MyColor.C99)),
          Container(height: 16),
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            BorderBtn("統編", light: currentArea == UnifiedNumber, height: 48, width: 120, onTap: () {
              onAreaClick(UnifiedNumber);
            }),
            BorderBtn("載具", light: currentArea == Vehicle, height: 48, width: 120, onTap: () {
              onAreaClick(Vehicle);
            }),
          ]),
          Container(height: 16),
          PayBtn(
              light: currentArea == Pay,
              onTap: () {
                onAreaClick(Pay);
              }),
          Expanded(child: Container()),
          Button("結帳", fontSize: 30, bgColor: MyColor.Red, height: 94, width: 220)
        ],
      ),
    );
  }
}

class BorderBtn extends StatelessWidget {
  double? width;
  double? height;
  Function()? onTap;
  bool light;
  String text;

  BorderBtn(this.text, {required this.light, this.width, this.height, this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: onTap,
      child: Container(
          width: width,
          height: height,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8)),
              border: Border.all(width: 1.2, color: light ? MyColor.Orange : MyColor.C99)),
          child: Text(text, style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold, color: light ? MyColor.Orange : MyColor.C99))),
    );
  }
}

class PayBtn extends StatelessWidget {
  Function()? onTap;
  bool light;

  PayBtn({required this.light, this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: onTap,
      child: Container(
          width: 248,
          height: 74,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8)),
              border: Border.all(width: 1.2, color: light ? MyColor.Orange : MyColor.C99)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              LocalImage(light ? "ic_cash_o.png" : "ic_cash_g.png", width: 43, height: 23),
              Text("付款", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold, color: light ? MyColor.Orange : MyColor.C99))
            ],
          )),
    );
  }
}
